<template>
  <div class="send">
    <!-- 第一行表单筛选 -->
    <div class="bg_frist">
      <!-- 第一列 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class=" bg-purple">
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="派件任务编号:" prop="">
                <el-input placeholder="请输入派件任务编号" style="width: 250px;" />
              </el-form-item>
            </el-form>
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="签收状态：">
                <el-select placeholder="请选择" style="width: 250px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="任务分配状态:">
                <el-select placeholder="请选择任务分配状态" style="width: 250px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="8">
          <div class="bg-purple">
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="订单编号:" prop="">
                <el-input placeholder="请输入订单编号" style="width: 250px;" />
              </el-form-item>
            </el-form>
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="预计完成时间:">
                <el-date-picker style="width: 250px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
              </el-form-item>
            </el-form>
            <el-button size="medium" type="primary">搜索</el-button>
            <el-button size="medium">重置</el-button>
          </div>
        </el-col>
        <!-- 第三列 -->
        <el-col :span="8">
          <div class="bg-purple">
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="订单编号:" prop="">
                <el-input placeholder="请输入订单编号" style="width: 250px;" />
              </el-form-item>
            </el-form>
            <el-form label-width="80px">
              <el-form-item size="samll" style="white-space: nowrap" label="预计完成时间:">
                <el-date-picker style="width: 250px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 第二行状态选择 -->
    <div class="bg_two">
      <el-row>
        <el-col :span="3"><div class="state active">全部</div></el-col>
        <el-col :span="3"><div class="state">新任务</div></el-col>
        <el-col :span="3"><div class="state">已完成</div></el-col>
      </el-row>
    </div>
    <!-- 第三行数据展示 -->
    <div class="bg_three">
      <el-button type="primary" @click="toggleSelection()">人工分配</el-button>
      <div class="table-container">
        <el-table ref="multipleTable" class="my-table" tooltip-effect="dark" style="width: 100%">
          <el-table-column fixed="left" type="selection" width="55" />
          <el-table-column label="序号" :min-width="40" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="name" label="派件作业编号" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="订单编号" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="所在营业部" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="任务分配状态" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="快递员姓名" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="签收状态" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="签收人" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="预计开始时间" :min-width="80" :style="{whiteSpace:'nowrap'}" />
          <el-table-column prop="address" label="预计完成时间" :min-width="80" :style="{whiteSpace:'nowrap'}" />
        </el-table>
      </div>
      <!-- 底部分页功能 -->
      <div class="block">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      // 假数据
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      options: [{
        value: 1
      }]
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.send{
  margin:10px 25px 0 10px;
}
// 筛选
.bg_frist{
  height: 200px;
  background-color: #fff;
  padding-top:20px ;
  padding-left: 20px;
}
::v-deep .el-form-item__label{
  font-size: 12px;
  font-weight: 400;
  color: #20232a;
}
.bg-purple{
  margin-right: 20px;
  .el-button{
  padding: 12px 32px;
  margin-left: 10px;
}
}

/* 状态选择 */
.bg_two{
  margin-top: 20px;
  background-color: #fff;
  .state{
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    span{
      font-weight: 700;
      padding-left: 5px;
    }
  }
  .active{
     background-color: #ffeeeb;
     color: #e15536;
  }
}
// 数据展示
.bg_three{
  margin-top: 20px;
  background-color: #fff;
  height: 500px;
  padding: 0 20px ;
  .table-container {
  overflow-x: auto; /* 这里设置容器的水平滚动条 */
}
.el-button{
  margin:20px 0
}
  .my-table{
    border: 1px solid #ebeef5;
    color: #20232a;
    border-bottom:0;
  }
}
// 底部分页
.block {
  text-align: center;
  margin-top:15px
}
</style>

